<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_coordinateTransformation"></title>
    <style type="text/css">
        #mousePositionDiv {
            position: absolute;
            z-index: 9999999;
            top: 50px;
            font-family: Arial;
            font-size: smaller;
            text-align: left;
            width: 360px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, layer,
        host = window.isLocal ? window.server : "https://iserver.supermap.io";
    url = host + "/iserver/services/map-world/rest/maps/World";

    //初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation()]
    });
    //初始化图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});
    map.events.on({"mousemove": getMousePositionPx});
    setposition();
    addHandler(window, "resize", setposition);

    //异步加载图层
    function addLayer() {
        map.addLayer(layer);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(0, 0), 1);
    }

    function getMousePositionPx(e) {
        var lonlat = map.getLonLatFromPixel(new SuperMap.Pixel(e.xy.x, e.xy.y));

        var newHtml = resources.text_coordinateTransformation + "<br>" + resources.text_mousePixelCoordinate + "x=" + Math.floor(e.clientX) + "，" + "y=" + Math.floor(e.clientY) +
            "<br>" + resources.text_positionCoordinate + "lon=" + lonlat.lon.toFixed(5) + "，" + "lat=" +
            lonlat.lat.toFixed(5);
        document.getElementById("mousePositionDiv").innerHTML = newHtml;
    }

    function addHandler(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }

    function setposition() {
        var width = map.getSize().w;
        document.getElementById("mousePositionDiv").style.left = width / 2 - 160 + "px";
    }
</script>
</body>
</html>